<template>
  <div class="plusButton">
    <el-button type="primary" class="plusNew" @click="drawerTrue()"
      ><i class="el-icon-plus"></i><span>新增</span></el-button
    >
    <el-drawer
      :visible.sync="drawer"
      title="路由编辑"
      size="50%"
      :destroy-on-close="true"
    >
      <el-divider></el-divider>
      <div class="plusDrawer">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="router"
        >
          <el-form-item label="路由ID:">
            <el-input
              v-model="router.routerId"
              placeholder="路由唯一ID"
            ></el-input>
          </el-form-item>
          <el-form-item label="路由名称:">
            <el-input v-model="router.name" placeholder="路由名称"></el-input>
          </el-form-item>
          <el-form-item label="路由URL:">
            <el-input v-model="router.uri" placeholder="路由URL"></el-input>
          </el-form-item>
          <el-form-item label="即时配送:">
            <el-switch v-model="router.status"></el-switch>
          </el-form-item>

          <el-form-item label="路由条件:" class="before">
            <!-- 添加条件 -->
            <div
              class="delete"
              v-for="(item, index) of router.predicates"
              :key="index"
            >
              <el-divider content-position="center"
                >{{ item.name
                }}<i @click="closethis(item, index)" class="el-icon-coffee"></i
              ></el-divider>
              <!-- 标签 -->
              <el-tag
                class="close"
                type="info"
                :key="indexa"
                v-for="(tag, indexa) in item.dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag, item)"
                @click="showInput(item)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="item.inputVisible"
                v-model="item.inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm(item)"
                @blur="handleInputConfirm(item)"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput(item)"
                >+ {{ item.name }}</el-button
              >
            </div>
            <!-- 下拉菜单 -->
            <el-dropdown @command="handleCommandUp" class="dashed">
              <span class="el-dropdown-link">
                添加路由条件<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="huang">
                <el-dropdown-item command="Path">Path</el-dropdown-item>
                <el-dropdown-item command="Host">Host</el-dropdown-item>
                <el-dropdown-item command="Cookie">Cookie</el-dropdown-item>
                <el-dropdown-item command="Header">Header</el-dropdown-item>
                <el-dropdown-item command="Method">Method</el-dropdown-item>
                <el-dropdown-item command="Query">Query</el-dropdown-item>
                <el-dropdown-item command="After">After</el-dropdown-item>
                <el-dropdown-item command="Before">Before</el-dropdown-item>
                <el-dropdown-item command="Between">Between</el-dropdown-item>
                <el-dropdown-item command="RemoteAddr"
                  >RemoteAddr</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
          <!-- 第二个下拉菜单 -->
          <el-form-item label="过滤器:" class="before">
            <div
              class="deleteb"
              v-for="(itemb, indexb) of router.filters"
              :key="indexb"
            >
              <el-divider content-position="center"
                >{{ itemb.name
                }}<i
                  @click="closethisb(itemb, indexb)"
                  class="el-icon-coffee"
                ></i
              ></el-divider>
              <div
                class="inputdown"
                v-for="(itemc, indexc) of itemb.args"
                :key="indexc"
              >
                <el-row :gutter="15">
                  <el-col :span="11"
                    ><el-input v-model="itemc.key">{{
                      itemc.key
                    }}</el-input></el-col
                  >
                  <el-col :span="11"
                    ><el-input v-model="itemc.value" placeholder="参数值">{{
                      itemc.value
                    }}</el-input></el-col
                  >
                  <el-col :span="2"
                    ><i
                      class="el-icon-remove-outline"
                      @click="closeOne(indexb, indexc)"
                    ></i
                  ></el-col>
                </el-row>
              </div>
              <el-button
                @click="parameterAdd(itemb)"
                size="small"
                class="getewayadd"
                ><i class="el-icon-plus"> 添加参数</i></el-button
              >
            </div>

            <el-dropdown @command="handleCommand" class="dashed">
              <span class="el-dropdown-link">
                添加过滤器<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="huang">
                <el-dropdown-item command="熔断器">熔断器</el-dropdown-item>
                <el-dropdown-item command="限流过滤器"
                  >限流过滤器</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </div>
      <!-- 提交 -->
      <div class="gatefooter">
        <el-button @click="cancelForm" class="gatefooters" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="closeDrawer()" size="mini"
          >确 定</el-button
        >
      </div>
    </el-drawer>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" fixed prop="routerId" label="路由ID">
      </el-table-column>
      <el-table-column align="center" prop="name" label="路由名称">
      </el-table-column>
      <el-table-column align="center" prop="uri" label="路由URL">
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态" width="180">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status"
            type="success"
            size="mini"
            cursor="auto"
            >正常</el-button
          >
          <el-button v-if="!scope.row.status" type="danger">禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button type="text" size="mini"
          @click="deleteClick(scope.row)" 
          
            >删除<i class="el-icon-arrow-down"></i
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { gatewayTableDate, updateAll , deleteOne } from "@/api/api-huang/gateway";
export default {
  name: "gatewayroute",
  data() {
    return {
      tableData: [], //接口数据
      drawer: false, //抽屉
      timer: null, //抽屉关闭按钮用的
      labelPosition: "right",
      //新增
      router: {
        routerId: "",
        name: "",
        uri: "",
        status: false,
        predicates: [
          //   {
          //         dynamicTags:[],
          //         inputValue: '',
          //         inputVisible: false,
          //         args: [],
          //         name: command
          // },
          //   {args:["新建2","新建2"],name:"Path"},
        ],
        filters: [
          // {
          // args:[
          //     {key:key-resolver,value:"#{@ipKeyResolver}"},
          //     {key:"redis-rate-limiter.replenishRate",value:20},
          //     {key:"redis-rate-limiter.burstCapacity",value:20}
          //     ],
          // name:"RequestRateLimiter",title:"限流过滤器"
          // }
        ],
      },
    };
  },
  mounted() {
    this.gatewayTableDateA();
  },
  methods: {
    //新增按钮
    drawerTrue(){
        let _self =this;
        _self.drawer=true;
        _self.router= {
        routerId: "",
        name : "",
        uri :"",
        status: false,
        predicates: [
        ],
        filters: [
      
        ],
      }
    },
    //取消按钮
    cancelForm() {
      let _self = this;
      _self.drawer = false;
    },
    //抽屉提交
    closeDrawer() {
      let _self = this;
      _self.updateAllmake();
      _self.drawer = false;
    },
    //过滤器添加小按钮
    parameterAdd(itemb) {
      let att = itemb.args.length;
      let add = att * 10 + 1;
      itemb.args.push({ key: add, value: "" });
    },
    //下拉选择框
    handleCommandUp(command) {
      let _self = this;
      _self.router.predicates.push({
        dynamicTags: [],
        inputValue: "",
        inputVisible: false,
        args: [],
        name: command,
      });
      console.log(_self.router.predicates);
    },
    handleCommand(command) {
      let _self = this;
      if (command == "熔断器") {
        _self.router.filters.push({
          args: [
            { key: "name", value: "default" },
            { key: "fallbackUri", value: " forward/fallback" },
          ],
          name: "Hystrix",
          title: command,
        });
      } else {
        _self.router.filters.push({
          args: [
            { key: "key - resolver", value: "#{@ipKeyResolver}" },
            { key: "redis-rate-limiter.replenishRate", value: 20 },
            { key: "redis-rate-limiter.burstCapacity", value: 20 },
          ],
          name: "RequestRateLimiter",
          title: command,
        });
        console.log("1");
      }
      console.log(_self.router);
    },

    //查看
    handleClick(row) {
        let _self = this;
      _self.drawer = true;
    },
    //删除
    deleteClick(row){
        let _self = this
        console.log(row)
        let data = row.id;
        deleteOne(data).then((res)=>{
            if(res.code == 200){
                _self.gatewayTableDateA();
            }
        })
    },
    //回收站icon
    closethis(item, index) {
      let _self = this;
      _self.router.predicates.splice(index, 1);
    },
    closethisb(itemb, indexb) {
      let _self = this;
      _self.router.filters.splice(indexb, 1);
    },
    //删除下面的-
    closeOne(indexb, indexc) {
      let _self = this;
      _self.router.filters[indexb].args.splice(indexc, 1);
    },
    //标签
    handleClose(tag, item) {
      item.dynamicTags.splice(item.dynamicTags.indexOf(tag), 1);
    },

    showInput(item) {
      item.inputVisible = true;
    },

    handleInputConfirm(item) {
      let inputValue = item.inputValue;
      if (inputValue) {
        item.dynamicTags.push(inputValue);
      }
      item.inputVisible = false;
      item.inputValue = "";
    },
    //增接口
    updateAllmake() {
      let _self = this;
      let a = _self.router;
      let data = {
        router: {
          routerId: a.routerId,
          name: a.name,
          uri: a.uri,
          status: a.status,
          predicates: [{ args: a.predicates.args, name: a.predicates.name }],
          filters: a.filters,
        },
      };
      updateAll(data).then((res) => {
        console.log(res);
        if(res.code==200){
            _self. gatewayTableDateA()
        }
      });
    },
    //列表接口
    gatewayTableDateA() {
      console.log(1234);
      let _self = this;
      let data = {
        pageNo: 1,
        pageSize: 10,
      };
      gatewayTableDate(data).then((res) => {
        console.log(res);
        let _self = this;
        _self.tableData = res.result;
        console.log(res.result);
      });
    },
  },
};

// let data = {
//         router:{

//             name:a.name,
//             predicates:a.predicates,
//             routerId:a.routerId,
//             status:a.status,
//             rui:a.uri

//         }
</script>
<style lang="less">
.plusButton {
  padding: 24px;
  margin: 10px;
  background-color: white;
}
.plusButton .el-divider--horizontal {
  margin: -10px 0;
}
.plusButton .el-drawer__header {
  color: black;
  font-size: 16px;
  line-height: 22px;
}
.plusNew {
  height: 32px;
  padding: 0 15px;
  font-size: 14px;
  text-align: center;
  margin-bottom: 12px;
}
.plusDrawer {
  width: 80%;
  margin-top: 34px;
  margin-left: 24px;
  margin-right: 24px;
  margin-bottom: 24px;
}
.plusDrawer label {
  font-weight: 400;
}
.routerSelect {
  width: 100%;
}
.plusDrawer .routerSelect .el-input__inner {
  border: 1px dashed #dcdfe6;
  text-align: center;
  content: "\e6e1";
}
.plusDrawer .routerSelect .el-icon-arrow-up:before {
  content: "";
}
.plusButton th {
  background-color: #fafafa;
}
.plusButton .el-button--mini {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  cursor: auto;
}
.plusButton .el-button--danger {
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 12px;
  background-color: #fff0f6;
  color: #eb2f96;
  cursor: auto;
}
.plusButton .before .el-divider--horizontal {
  margin-top: 25px;
  margin-bottom: 25px;
}
.delete .el-button {
  border: 1px dashed #dcdfe6;
  padding: 2px;
  margin-top: 50px;
  font-size: 12px;
}
.plusButton .inputli {
  margin-top: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.dashed {
  border: 1px dashed #dcdfe6;
  width: 100%;
  text-align: center;
}
.huang {
  width: calc(35% - 65px);
}
.el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  border-style: none;
}
//标签
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.delete .el-button {
  margin: 0;
}
.delete .button-new-tag {
  line-height: 0;
  cursor: auto;
}
.delete .el-tag.el-tag--info {
  cursor: default;
}
.delete .el-divider__text.is-center {
  white-space: nowrap;
}
.inputdown .el-input__inner {
  margin-bottom: 10px;
}
//滚动条
.plusButton .el-drawer {
  overflow-y: scroll;
}
::-webkit-scrollbar-thumb {
  background: #cdcdcd;
  border-radius: 2px;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f6f6f6;
  border-radius: 2px;
}
//滚动条⬆
//添加参数按钮、
.gatewayadd {
  height: 24px;
  padding: 0 7px;
  font-size: 14px;
  border-radius: 4px;
  line-height: 1.499;
  position: relative;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  margin-left: 28px;
}
.deleteb .el-button {
  margin-left: 30%;
  margin-bottom: 5%;
  width: 28%;
  border: 1px dashed #dcdfe6;
}
.gatefooter {
  position: fixed;
  height: 50px;
  padding: 10px 16px;
  width: 50%;
  bottom: 0;
  right: 0;
  border-top: 1px solid #dcdfe6;
  text-align: right;
  background-color: white;
}
.el-dropdown-link {
  margin-bottom: 50px;
}
.plusButton .el-drawer.rtl {
  height: 95%;
}
</style>